import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_draw/common/coordinate.dart';

class Paper extends StatefulWidget {
  const Paper({super.key});

  @override
  State<Paper> createState() => _PaperState();
}

class _PaperState extends State<Paper> {
  ui.Image? _image;

  void _loadImage() async {
    _image = await loadImageFromAssets('assets/images/right_chat.png');
    setState(() {});
  }

  /// 读取 assets 中的图片
  Future<ui.Image>? loadImageFromAssets(String path) async {
    ByteData data = await rootBundle.load(path);
    return decodeImageFromList(data.buffer.asUint8List());
  }

  @override
  void initState() {
    super.initState();
    _loadImage();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: CustomPaint(
        painter: PaperPainter(_image),
      ),
    );
  }
}

class PaperPainter extends CustomPainter {
  final Paint mPaint = Paint()
    ..style = PaintingStyle.fill
    ..color = Colors.blue
    ..strokeWidth = 0.5;
  final Path mPath = Path();
  final ui.Image? image;
  final Coordinate coordinate = Coordinate();

  PaperPainter(this.image);

  @override
  void paint(Canvas canvas, Size size) {
    coordinate.paint(canvas, size);
    // 原点坐标移动到屏幕中心
    canvas.translate(size.width / 2, size.height / 2);

    //_drawImage(canvas);
    //_drawImageRect(canvas);

    _drawImageNine(canvas);
  }

  /// 绘制图片
  void _drawImage(Canvas canvas) {
    if (image != null) {
      canvas.drawImage(
          image!, Offset(-image!.width / 2, -image!.height / 2), mPaint);
    }
  }

  /// 图片区域绘制
  void _drawImageRect(Canvas canvas) {
    if (image != null) {
      // drawImageRect中主要是两个矩形域，src 和 dst。
      // src 表示从资源图片 image 上抠出一块矩形域，所以原点是图片的左上角。
      // dst 表示将抠出的图片填充到画布的哪个矩形域中，所以原点是画布原点。
      canvas.drawImageRect(
          image!,
          Rect.fromCenter(
              center: Offset(image!.width / 2, image!.height / 2),
              width: 60,
              height: 60),
          const Rect.fromLTRB(0, 0, 100, 100).translate(200, 0),
          mPaint);
    }
  }

  /// 绘制 .9 图
  void _drawImageNine(Canvas canvas) {
    const centerOffset = Offset(0, 0);
    if (image != null) {
      // drawImageNine 中主要是两个矩形域，center 和 dst。
      // center 表示从资源图片image上一块可缩放的矩形域，所以原点是图片的左上角。
      // dst 表示将抠出的图片填充到画布的哪个矩形域中，所以原点是画布原点。
      // 这样很容易画出气泡的效果，即指定区域进行缩放，其余不动。
      canvas.drawImageNine(
          image!,
          Rect.fromCenter(
              center: Offset(image!.width / 2, image!.height - 6.0),
              width: image!.width - 20.0,
              height: 2.0),
          Rect.fromCenter(center: centerOffset, width: 300, height: 120),
          mPaint);

      canvas.drawImageNine(
          image!,
          Rect.fromCenter(
              center: Offset(image!.width / 2, image!.height - 6.0),
              width: image!.width - 20.0,
              height: 2.0),
          Rect.fromCenter(center: centerOffset, width: 100, height: 50)
              .translate(250, 0),
          mPaint);

      canvas.drawImageNine(
          image!,
          Rect.fromCenter(
              center: Offset(image!.width / 2, image!.height - 6.0),
              width: image!.width - 20.0,
              height: 2.0),
          Rect.fromCenter(center: centerOffset, width: 80, height: 250)
              .translate(-250, 0),
          mPaint);
    }
  }

  @override
  bool shouldRepaint(PaperPainter oldDelegate) => image != oldDelegate.image;
}
